<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
</head>

<body>
<!--
1. Map容器 : 无序的，key不重复的多个key-value的集合体
	* set(key, value)
	* get(key)
	* delete(key)
	* has(key)
	* clear()
	* size
2.遍历
	*forEach():使用回调函数遍历每个成员
	*for of
	*keys():返回键名的遍历器
	*values():返回键值的遍历器
	*entries():返回键值对的遍历器
3.将Map数据结构转换为数组
	[...Map.keys()]
	[...Map.values()]
-->
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>4</button>
	<button>5</button>
	<input type="button" value="获取点击的次数" class="count">
	<script type="text/javascript">
		const people = new Map();
		// 设置map数据
		people.set('jelly', 20)
		people.set('mary', 20)
		people.set('miffy', 220)
		// 获取map数据
		console.log(people.get('jelly'));//20
		// 获取map数据的键值对
		console.log(people.keys(), people.values());//MapIterator {"jelly", "mary", "miffy"} MapIterator {20, 20, 220}
		// 获取map数据的键值对 转化为数组
		console.log([...people.keys()], [...people.values()]);//(3) ["jelly", "mary", "miffy"] (3) [20, 20, 220]

		// 遍历map数据
		for (let [key, val] of people) {
			console.log(key + ':' + val)
		}


	</script>
	<script>
		// 存储关于对象的信息,而不是将信息存储到对象上
		const clickCounts = new Map();
		const buttons = document.querySelectorAll('button');
		Array.from(buttons).forEach(button => {
			console.log(button) //<button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
			// 初始化button的值
			clickCounts.set(button, 0);
			button.addEventListener('click', function () {
				// 点击获取button的值
				const val = clickCounts.get(this);
				// 点击之后设置button的值
				clickCounts.set(this, val + 1);
				console.log(this, val,clickCounts);
			})
		})
		document.querySelector('.count').addEventListener('click', thisCount)
		function thisCount() {
			// 获取按钮点击的次数
			let button = []
			let id = 0;
			for (let index of clickCounts) {
				button.push({
					[`button-${id++}`]: index[1],//表示点击的button
					count: index[1],//当前button点击的次数
				})
			}
			console.log(button);
		}




	
	</script>
	<script>
			// WeakMap数据结构,具有自动清除的动能,可以避免内存泄漏
		let jelly = { name: 'jelly', age: 20 };
		const weak = new WeakMap();
		weak.set(jelly);
		jelly = null;
		console.log(weak);
	</script>
</body>

</html>